<template>
  <div class="sign-in-subscribe-my">
    <c-title text="我的"></c-title>
    <header class="header">
      <div class="info">
        <van-image round width="4rem" height="4rem" :src="avatar_image" />
        <div class="member">
          <div style="display: flex; align-items: center;">
            <h6 class="nick-name">{{ user_name }}</h6>
            <img style="width: 1.8rem; height: 1.8rem;" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/sign_in_subscribe/acer_truncatum.png" />
          </div>
          <span class="level">{{ grade_name }}</span>
        </div>
      </div>
      <!-- <div class="header-right" @click="link_code">
        <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_qr_code.png')" />
        <p style="font-size: 0.75rem; color: #fff;">转证码</p>
      </div> -->
    </header>
    <main class="main">
      <ul class="box">
        <li class="box-item" @click="link('sign_in_subscribe_active_value')">
          <div class="nav">
            <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_active.png')" />
            <span class="title">{{active_value_name}}</span>
          </div>
          <span>
            <span class="content">{{ usable }}</span>
            <van-icon name="arrow" />
          </span>
        </li>
        <li class="box-item" @click="link('sign_in_subscribe_stock_rights')" v-if="stock_show">
          <div class="nav">
            <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_stocks.png')" />
            <span class="title">{{stock_name}}</span>
          </div>
          <span>
            <span class="content">{{ stock_total }}</span>
            <van-icon name="arrow" />
          </span>
        </li>
        <li class="box-item" @click="link('sign_in_subscribe_acer_truncatum')" v-show="yuan_bao_feng_show">
          <div class="nav">
            <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_ingot.png')" />
            <span class="title">{{yuan_bao_feng_name}}</span>
          </div>
          <span>
            <span class="content">{{ yuan_bao_feng }}</span>
            <van-icon name="arrow" />
          </span>
        </li>

        <li class="box-item" @click="link('integral_v2')">
          <div class="nav">
            <van-image width="1rem" height="1rem" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage1.png" />
            <span class="title">{{point_name}}</span>
          </div>
          <span>
            <span class="content">{{ point_value }}</span>
            <van-icon name="arrow" />
          </span>
        </li>
        <li class="box-item" @click="link('balance')">
          <div class="nav">
            <van-image width="1rem" height="1rem" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/memberV2/member_a(205).png" />
            <span class="title">{{balance_name}}</span>
          </div>
          <span>
            <span class="content">{{ balance_value }}</span>
            <van-icon name="arrow" />
          </span>
        </li>
        <li class="box-item" @click="link('love_index')" v-show="love_show">
          <div class="nav">
            <van-image width="1rem" height="1rem" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/memberV2/member_a(1).png" />
            <span class="title">{{love_name}}</span>
          </div>
          <span>
            <span class="content">{{ love_value }}</span>
            <van-icon name="arrow" />
          </span>
        </li>
        <li class="box-item" @click="link('sign_in_subscribe_trading')" v-show="balance_active">
          <div class="nav">
            <van-image width="1rem" height="1rem" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/memberV2/member_a(205).png" />
            <span class="title">{{balance_name + '转' + active_value_name}}</span>
          </div>
          <span>
            <van-icon name="arrow" />
          </span>
        </li>
        <li class="box-item" @click="link('sign_in_subscribe_trading_b')" v-show="active_balance">
          <div class="nav">
            <van-image width="1rem" height="1rem" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/memberV2/member_a(205).png" />
            <span class="title">{{active_value_name + '转' + balance_name}}</span>
          </div>
          <span>
            <van-icon name="arrow" />
          </span>
        </li>


        <li class="box-item" @click="link('sign_in_subscribe_user')">
          <div class="nav">
            <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_user.png')" />
            <span class="title">有效用户</span>
          </div>
          <van-icon name="arrow" />
        </li>
        <li class="box-item" @click="link('sign_in_subscribe_earnings')">
          <div class="nav">
            <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_rewards.png')" />
            <span class="title">奖励记录</span>
          </div>
          <van-icon name="arrow" />
        </li>
        <li class="box-item" @click="link('sigin_in_subscribe_income')">
          <div class="nav">
            <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_rewards.png')" />
            <span class="title">管理奖记录</span>
          </div>
          <van-icon name="arrow" />
        </li>
        <!-- <li class="box-item" @click="link('sign_in_subscribe_wallet')">
          <div class="nav">
            <van-image
              width="1rem"
              height="1rem"
              :src="require('../../../assets/images/sign_in_subscribe/sign_in_wallet.png')"
            />
            <span class="title">钱包地址</span>
          </div>
          <van-icon name="arrow" />
        </li> -->
        <li class="box-item" @click="link('sign_in_subscribe_team')">
          <div class="nav">
            <van-image width="1rem" height="1rem" :src="require('../../../assets/images/sign_in_subscribe/sign_in_team.png')" />
            <span class="title">我的团队</span>
          </div>
          <van-icon name="arrow" />
        </li>
      </ul>
    </main>
  </div>
</template>
<script>
import { Image as VanImage } from "vant";
export default {
  components: { VanImage },
  data() {
    return {
      usable: '--',
      froze: '--',
      yuan_bao_feng: '--',
      stock_total: '--',
      is_vip: '--',
      grade_name: "",
      user_name: "",
      avatar_image: "",
      stock_show: 1,
      yuan_bao_feng_show: 1,
      balance_active: 0,
      active_balance: 0,
      stock_name: "",
      active_value_name: "",
      yuan_bao_feng_name: "",
      point_name: "",
      point_value: "---",
      balance_name: "",
      balance_value: "---",
      love_name: "",
      love_value: "---",
      love_show: 1
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    link_code() {
      this.$router.push(this.fun.getUrl("sign_in_subscribe_code"));
    },
    async getData() {
      let { result, msg, data } = await $http.get("plugin.sign-buy.frontend.sign-buy-page.member", {}, "加载中");
      if (result == 0) return this.$toast(msg);
      let {
        usable,
        froze,
        yuan_bao_feng,
        stock_total,
        is_vip,
        grade_name,
        user_name,
        avatar_image,
        stock_show,
        yuan_bao_feng_show,
        balance_active,
        active_balance,
        stock_name,
        active_value_name,
        yuan_bao_feng_name,
        point_name,
        point_value,
        balance_name,
        balance_value,
        love_name,
        love_value,
        love_show
      } = data;
      this.usable = usable;
      this.froze = froze;
      this.yuan_bao_feng = yuan_bao_feng;
      this.stock_total = stock_total;
      this.is_vip = is_vip;
      this.grade_name = grade_name;
      this.user_name = user_name;
      this.avatar_image = avatar_image;

      this.stock_show = stock_show;
      this.yuan_bao_feng_show = yuan_bao_feng_show;
      this.balance_active = balance_active;
      this.active_balance = active_balance;
      this.stock_name = stock_name;
      this.active_value_name = active_value_name;
      this.yuan_bao_feng_name = yuan_bao_feng_name;
      this.point_name = point_name;
      this.point_value = point_value;
      this.balance_name = balance_name;
      this.balance_value = balance_value;
      this.love_name = love_name;
      this.love_value = love_value;
      this.love_show = love_show;
    },
    link(url) {
      this.$router.push(this.fun.getUrl(url));
    }
  }
};
</script>
<style lang="scss" scoped>
.sign-in-subscribe-my {
  .header-right {
    margin-right: 1.2188rem;
  }

  .nav {
    display: flex;
    align-items: center;
  }

  .title {
    margin-left: 0.9375rem;
  }

  .content {
    margin-right: 0.6875rem;
    color: #f51d1d;
    font-weight: 400;
    font-size: 0.75rem;
  }

  .nick-name {
    margin-top: 0.5rem;
    color: #fff;
    margin-bottom: 1rem;
    text-align: left;
  }

  .box {
    display: flex;
    flex-direction: column;
  }

  .box-item {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 0.875rem 1rem 0.8rem 0.7rem;
    border-radius: 0.3rem;
    color: #101010;
  }

  .level {
    color: #bc6d1a;
    background-color: #fff;
    border-radius: 3.125rem;
    text-align: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.6875rem;
  }

  .info {
    display: flex;
    align-items: center;
    padding: 1.375rem 1.1875rem 2.125rem;
  }

  .member {
    margin-left: 0.375rem;
    text-align: left;
  }

  .header {
    background: #ffad57;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>